<!--
 * @Author: your name
 * @Date: 2020-12-10 17:17:50
 * @LastEditTime: 2020-12-17 14:18:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\proj_steam\src\html\cart\cart.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/lib/swiper-6.3.5/swiper-bundle.min.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/nav.css">
    <link rel="stylesheet" href="/css/cart/cart.css">


</head>

<body>
        <!-- 导航栏 -->
        <header>
        </header>

        <!-- 内容 -->
        <section>
            <!-- 内容头部 -->
            <div class="page">

                <!-- 导航栏 -->
                <nav class="store-header"> </nav>

                <!-- 头部内容 -->
                <div class="page-content">
                    <div class="content">
                        <div class="content-title">
                            <a href="/html/list/list.html">所有产品</a>
                            <span>> 您的购物车</span>
                        </div>
                        <h2 class="page-header">您的购物车</h2>
                    </div>
                </div>
            </div>

            <!-- 购物车内容 -->
            <div class="cart-content">
                <div class="content">
                    <!-- 左边：购物车 -->
                    <div class="left-content">

                        <!-- 购物车盒子 -->
                        <div class="cartBox">
                            
                            <!-- 购物车物品列表 -->
                            <div class="cart-item-list" id="cartItem">
                                <!-- 购物车物品 (渲染) -->                
                                <!-- <div class="cart-item">
                                    <div class="cart-item-img">
                                        <a href="#">
                                            <img src="/images/cart/item/Mafia.jpg" alt="">
                                        </a>
                                    </div>

                                    <div class="cart-item-title">
                                        <a href="#">Mafia: Definitive Edition</a>
                                        <span class="platform-img win"></span>
                                    </div>

                                    <div class="cart-item-price">
                                        
                                        <div class="price">&yen; <span>139</span></div>

                                        <a href="#" class="del-cart-item">移除</a>
                                    </div>

                                    <div class="count-btnBox">
                                        <button class="count-btn reduce" id="reduceBtn">-</button>
                                        <input type="text" value="1" id="countInput">
                                        <button class="count-btn add" id="addBtn">+</button>
                                    </div>
                                </div> -->
                                <!-- <div class="cart-item">
                                    <div class="cart-item-img">
                                        <a href="#">
                                            <img src="/images/cart/item/Red_Dead_Redemption2.jpg" alt="">
                                        </a>
                                    </div>

                                    <div class="cart-item-title">
                                        <a href="#">Red Dead Redemption 2</a>
                                        <span class="platform-img win"></span>
                                    </div>

                                    <div class="cart-item-price discount">
                                        <div class="origin-price">&yen;<span>249</span></div>
                                        
                                        <div class="price">&yen; <span>166</span></div>

                                        <a href="#" class="del-cart-item">移除</a>
                                    </div>

                                    
                                    <div class="count-btnBox">
                                        <button class="count-btn reduce" id="reduceBtn">-</button>
                                        <input type="text" value="1" id="countInput">
                                        <button class="count-btn add" id="addBtn">+</button>
                                    </div>
                                </div> -->
                            </div>
                            <script type="text/html" id="cartItemTemplate">
                                {{each list item}}
                                <div class="cart-item">
                                    <div class="cart-item-img">
                                        <a href="/html/detail/detail.html?{{item.id}}">
                                            <img src="{{item.img}}" alt="">
                                        </a>
                                    </div>

                                    <div class="cart-item-title">
                                        <a href="/html/detail/detail.html?{{item.id}}">{{item.name}}</a>
                                        <span class="platform-img win"></span>
                                    </div>

                                    <div class="cart-item-price discount">
                                        <div class="origin-price">&yen;<span>{{item.originPrice * item.count}}</span></div>
                                        
                                        <div class="price">&yen; <span>{{item.finalPrice * item.count}}</span></div>

                                        <em href="#" class="del-cart-item">移除</em>
                                    </div>

                                    <div class="count-btnBox">
                                        <button class="count-btn reduce" >-</button>
                                        <input type="text" value="{{item.count}}">
                                        <button class="count-btn add">+</button>
                                    </div>
                                </div>
                                {{/each}}
                            </script>

                            <!-- 购物车结算 -->
                            <div class="cart-checkout">
                                <div class="total-count">
                                    <div class="total-count-text">
                                        <div class="text-total-title">
                                            预计总额<sup>1</sup>
                                        </div>
                                        <div class="total-price">
                                            &yen; <span>0</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="cart-self">
                                    为自己购买还是作为礼物购买？ 选择一项以继续付款。
                                </div>
                                <div class="cart-checkout-buttons">
                                    <a href="#" class="buttons-gift btn">
                                        为自己购买
                                    </a>
                                    <a href="#" class="buttons-self btn">
                                        作为礼物购买
                                    </a>
                                </div>
                                <div class="cart-noticeBox">
                                    <div class="cart-notice">
                                        <span>1</span>
                                        <span>所有的价格均已包含增值税（如适用）</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 删除全部按钮 和 继续购物 -->
                            <div class="cart-function">
                                <div class="del-cart-itemAll">
                                    <em href="#">移除所有物品</em>
                                </div>
                                <div class="continue-shopping-btn">
                                    <a href="/html/list/list.html" class="btn continue-btn">
                                        继续购物
                                    </a>
                                </div>
                            </div>
                            <br>
                            <br>
                            <!-- 注意事项 -->
                            <div class="cart-digital-noticeBox">
                                <h2>交付</h2>
                                <div class="cart-digital-notice">
                                    <img src="/images/cart/background/ico_steam_cart.png" alt="">
                                    <div class="cart-digital-notice-content">
                                        <h4>所有电子商品将会经由 Steam 桌面应用程序递送给您。
                                        </h4>
                                        <p>本次购买结束后，您将可以下载 Steam 和您所购买的游戏。</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- 右边：购物车推荐 -->
                    <div class="right-content">

                        <!-- TODO: 购物车每日特惠 -->

                        <!-- 焦点 -->
                        <h2>焦点</h2>
                        <div class="focus-goods">
                            <!-- TODO: 轮播图完善 -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                  <div class="swiper-slide">
                                    <div class="focus-week">
                                        <div class="focus-week-img">
                                            <a href="#">
                                                <span>1906</span>
                                            </a>
                                        </div>
                                        <div class="focus-week-des">
                                            每周一皆有新特惠
                                        </div>
                                    </div>
                                  </div>
                                  <div class="swiper-slide">
                                      <div class="focus-good">
                                          
                                      </div>
                                  </div>
                                  <div class="swiper-slide">Slide 3</div>
                                </div>

                            </div>
                            <div class="swiper-btns">
                                <!-- Add Pagination -->
                                <div class="swiper-pagination">
                                    正在显示第
                                </div>
                                <!-- Add Arrows -->
                                <div class="swiper-button-next swiper-button"></div>
                                <div class="swiper-button-prev swiper-button"></div>
                            </div>                              
                        </div>

                        <!-- 为您推荐 -->
                        <div class="cart-recommend">
                            <div class="recommend-title">
                                为您推荐
                            </div>
                            <div class="recommend-des">
                                根据您购物车中的项目
                            </div>
                            <div class="recommend-goods">
                                <a href="#">
                                    <img src="/images/list/noita.jpg" alt="">
                                    <p>&yen; <span>70</span></p>
                                </a>
                                <a href="#">
                                    <img src="/images/list/cyperpunk_2077.jpg" alt="">
                                    <p>&yen; <span>298</span></p>
                                </a>
                                <a href="#">
                                    <img src="/images/list/grand_theft_autoV.jpg" alt="">
                                    <p>&yen; <span>135</span></p>
                                </a>
                                <a href="#">
                                    <img src="/images/list/hades.jpg" alt="">
                                    <p>&yen; <span>80</span></p>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <!-- 底部栏 -->
        <footer></footer>
</body>


<script src="/lib/requirejs/require.js" data-main='/js/cart/cart'></script>

</html>